<template>
	<view class="warp">
		<view style="
		 background: linear-gradient(to bottom,#4A9BFF 0%,#3988FD 50%, #1262E4 100%);
		height: 194px;
		padding-top: 10px;
		padding-left: 10px;">
			<text style="color: #fff; font-size: 16px;font-weight: bold; margin-left: 160px;">主页</text>
			<view class="top">
				<image src="../../static/1111.jpg" mode=""></image>
				<text class="le">大美汽修厂,欢迎你</text>
				<text class="re" @click="resouce">救援</text>
			</view>
		</view>



		<view class="fu-top">
			<!-- <uni-section padding > -->
			<uni-grid :column="2" :show-border="false" @change="topChange" class="grid-overlay">
				<uni-grid-item v-for="(item, index) in topList" :index="index" :key="index">
					<view class="grid-item">
						<image :src="item.url" class="image" mode="aspectFill" />
						<text class="text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
			<!-- </uni-section> -->

		</view>
		<!-- <uni-section padding class="list"> -->
		<view class="list">
			<uni-grid :column="3" :show-border="false" @change="change">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<image :src="item.url" class="image" mode="aspectFill" />
						<text class="text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="footer">
			<view class="footer-top">
				<view class="left-section">
					<image src="../../static/最新通知.png" class="image"></image>
					<text class="notification-link">最新通知</text>
				</view>
				<view class="right-section">
					<text class="task-count" @click="navigateToOtherPage">今日需要上门取车任务共32单
						<uni-icons type="right" size="15" color="#FF7450"></uni-icons>
					</text>
				</view>
			</view>
			<view class="footer-content">
				<uni-table class="custom-table" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th class="user-col">用户</uni-th>
						<uni-th class="service-col">服务项目</uni-th>
						<uni-th class="time-col">时间</uni-th>
					</uni-tr>
					<uni-tr>
						<uni-td>张先生</uni-td>
						<uni-td>汽车美容、基础保养</uni-td>
						<uni-td>2024-02-23 11:23</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td>张先生</uni-td>
						<uni-td>汽车美容、基础保养</uni-td>
						<uni-td>2024-02-23 11:23</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td>张先生</uni-td>
						<uni-td>汽车美容、基础保养</uni-td>
						<uni-td>2024-02-23 11:23</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td>张先生</uni-td>
						<uni-td>汽车美容、基础保养</uni-td>
						<uni-td>2024-02-23 11:23</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td>张先生</uni-td>
						<uni-td>汽车美容、基础保养</uni-td>
						<uni-td>2024-02-23 11:23</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
		<view style="height: 50px;">
			<view @click="nagoTo">退出登录</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				showPop: false,
				dynamicList: [],
				topList: [{
					url: '/static/扫码@3x.png',
					text: '核销扫码',
					badge: '0',
					// type: "primary"
				}, {
					url: '/static/输入2@3x.png',
					text: '输入核销码',
					badge: '0',
					// type: "success"
				}],
				list: [{
						url: '/static/经营统计.png',
						text: '经营统计',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/hexiao.png',
						text: '核销记录',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/mingxi.png',
						text: '收支明细',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/dingdan.png',
						text: '订单管理',
						badge: '2',
						type: "error"
					},
					{
						url: '/static/kajuan.png',
						text: '卡劵管理'
					},
					{
						url: '/static/维修任务.png',
						text: '维修任务'
					},
					{
						url: '/static/评价管理.png',
						text: '评价管理'
					},
					{
						url: '/static/商户资料.png',
						text: '商户资料'
					},
					{
						url: '/static/svg_活动发布.png',
						text: '活动发布'
					}
				]
			}
		},
		methods: {
			//救援
			nagoTo() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			resouce() {
				uni.navigateTo({
					url: "/pages/index/Rescue/Rescue",
				})
			},
			topChange(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++
				if (index == 0) {
					this.fun()
				} else if (index == 1) {
					uni.navigateTo({
						url: "/pages/enterCode/enterCode"
					})
				}
			},
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/manage/manage'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: "/pages/verificationRecord/verificationRecord"
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages/moneyDetail/moneyDetail'
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: "/pages/orderManagement/orderManagement"
					})
				} else if (index == 4) {
					uni.navigateTo({
						url: "/pages/carManagement/carManagement"
					})
				} else if (index == 5) {
					uni.navigateTo({
						url: '/pages/repairTask/repairTask'
					})
				} else if (index == 6) {
					uni.navigateTo({
						url: '/pages/evaluate/evaluate'
					})
				} else if (index == 7) {
					uni.navigateTo({
						url: '/pages/business/business'
					})
				} else if (index == 8) {
					uni.navigateTo({
						url: '/pages/activity/activity'
					})
				}

			},
			//调用摄像头
			fun() {
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						uni.navigateTo({
							url: "/pages/index/scan/scan"
						})
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.warp {
		background-color: #e9e9eb;
		z-index: -1;
	}

	// 顶部样式开始
	.top {
		height: 140px;
		display: flex;
		align-items: center;
		padding: 7px;
		// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		z-index: 1;
	}

	.top image {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		/* 使图片圆形 */
		margin-right: 10px;
		margin-bottom: 30px;
	}

	.le {
		font-size: 20px;
		color: #fff;
		margin-bottom: 30px;
		/* 字体颜色白色 */
	}

	// 顶部样式结束

	//扫码样式开始
	.fu-top {
		margin-top: -20px;
		height: 100px;
		background-color: #fff;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 10px;
		z-index: 3;

	}

	.grid-overlay {
		margin-top: -40px;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		padding-top: 17px;
		margin-left: 10px;
		margin-right: 10px;
		z-index: 4;
	}

	.grid-item .image {
		width: 50px;
		height: 50px;
	}

	.grid-item .text {
		font-size: 14px;
		margin-top: 5px;
	}

	//扫码样式结束
	.list {
		margin-top: 100px;
		background-color: #e9e9eb;
		height: 400px;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 10px;
		z-index: 10;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box .image {
		width: 25px;
		height: 25px;
	}

	.grid-item-box .text {
		font-size: 14px;
		margin-top: 5px;
	}

	//底部样式开始
	.footer {
		background-color: #fff;
		margin-top: -35px;
		margin-left: 10px;
		margin-right: 10px;
		height: 220px;
		border-radius: 10px;
	}

	.footer-top {
		display: flex;
		border-radius: 10px;
		justify-content: space-between;
		align-items: center;
		height: 30px;
		background-color: #fff;
	}

	.left-section {
		display: flex;
		align-items: center;
	}

	.right-section {
		text-align: right;
	}

	.image {
		width: 30px;
		height: 30px;
	}

	.notification-link {
		font-size: 16px;
		font-weight: bold;
	}

	.task-count {
		/* 任务计数样式 */
		color: #FF7450;
		font-size: 14px;
	}

	.footer-content {
		margin-top: 10px;
	}

	//表格样式开始
	.custom-table {
		width: 100%;
		border-collapse: collapse;
		margin: 0 auto;
	}

	.custom-table th,
	.custom-table td {
		// border: 1px solid #ddd;
		padding: 1px;
		text-align: center;
		word-wrap: break-word;
		/* 防止内容溢出 */
	}

	.custom-table tr:nth-child(even) {
		// background-color: #f2f2f2;
	}

	.custom-table th {
		color: #3a3a3a;
	}

	.custom-table .user-col {
		width: 10%;
		/* 设置第一列宽度 */
	}

	.custom-table .service-col {
		width: 20%;
		/* 设置第二列宽度 */
	}

	.custom-table .time-col {
		width: 25%;
		/* 设置第三列宽度 */
	}

	.re {
		margin-left: 15%;
		color: red;
		font-size: 20px;
		margin-bottom: 30px;
	}

	//底部样式结束
</style>